import React, { useState } from 'react';
import { useEffect } from 'react';
import { history } from 'umi';
import { Popover } from 'antd';
import iconModule from './../iconModule';
import './index.less';
export default (props) => {
  const { list, reloadRouter } = props;
  const RenderLink = (props) => {
    const { subAccessList } = props;
    return subAccessList.map((item, o) => {
      const { accessName, subAccessList: childList } = item;
      return (
        <div key={o} className="renderLink_box">
          <div className="renderLink_title">{accessName}</div>
          <div className="renderLink_content">
            {childList.map((val, index) => {
              const { accessName, accessUrl, id } = val;
              return (
                <div
                  onClick={() => {
                    history.push({
                      pathname: accessUrl,
                      query: {
                        accessId: id,
                      },
                    });
                  }}
                  className="renderLink_label"
                >
                  {accessName}
                </div>
              );
            })}
          </div>
        </div>
      );
    });
  };
  if (list.length === 0) {
    return null;
  } else {
    return (
      <div className="base_common">
        <div className="common_content">
          {list.map((item, index) => {
            const { accessName, accessIcon, subAccessList } = item;
            return (
              <Popover
                key={index}
                placement="right"
                content={<RenderLink subAccessList={subAccessList}></RenderLink>}
                trigger="hover"
              >
                <div className="common_title">
                  <img className="common_icon" src={iconModule[accessIcon]} />
                  <div>{accessName}</div>
                </div>
              </Popover>
            );
          })}
        </div>
      </div>
    );
  }
};
